<template>
  <div>
    <h2>search</h2>
    <!-- 路由组件传值 专门的两种方式 query params
    query   ?key=value&key=value
    params 在注册时需要个占位符  /值

    使用params传值的方式
    1.哪个路由组件传值 就在其注册的位置配置占位  :键名
    2.进行传值 router-link :to = `/search/detail/${item.stu_id}`
    
     -->
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <!-- <router-link :to="'/search/detail?stu_id=' + item.stu_id">{{
          item.student
        }}</router-link> -->
        <!-- <router-link :to="`/search/detail/${item.stu_id}/${item.student}`">{{
          item.student
        }}</router-link> -->
        <!-- to写成对象的格式传参 -->
        <!-- <router-link :to="{ name: 'detail', query: { stu_id: item.stu_id } }">{{
          item.student
        }}</router-link> -->
        <router-link
          :to="{ name: 'detail', params: { stu_id: item.stu_id } }"
          >{{ item.student }}</router-link
        >
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          stu_id: 1,
          class: "2203A",
          student: "汪涵",
        },
        {
          stu_id: 2,
          class: "2203A",
          student: "洋洋",
        },
        {
          stu_id: 3,
          class: "2203A",
          student: "孙伟",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
</style>